<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品分类管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
     <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
     <link rel="stylesheet" href="/css/style.css">
     <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
     <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>-->
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/plugins/select2/select2.css"/>
    <link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css"/>
    <script src="/plugins/select2/select2.min.js" type="text/javascript"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">商品分类管理
    </h3>
</div>

<div class="box-body">
    <ol class="breadcrumb" id="daohanglan">
    </ol>

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" onclick="echoTbItemCat()" title="新建"
                            data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" onclick="deleteallTbItemCat()" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 批量删除</button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-check"></i> 刷新
                    </button>

                </div>
            </div>
        </div>


        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input type="checkbox" onclick="reversal()" class="icheckbox_square-blue" id="selall">
                </th>
                <th class="sorting_asc">分类ID</th>
                <th class="sorting">分类名称</th>
                <th class="sorting">类型模板ID</th>

                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="tbItemCatList">
            </tbody>
        </table>
        <!--数据列表/-->

        <script type="text/javascript">

            //页面加载时间
            $(function () {
                showone()
            })

            //展示分类数据一级
            function showone() {

                //导航栏加载
                var daohanglan = '<li><a href="javascript:showone()">顶级分类列表</a></li>'
                $("#daohanglan").html(daohanglan)

                //展示分类数据一级
                $.ajax({
                    url: "/TbItemCat/TbItemCatshow",
                    data: {parentId: 0},
                    type: "post",
                    dataType: "json",
                    async: false,
                    success: function (pm) {
                        var tbItemCatList = ''
                        $(pm.data).each(function (i, e) {
                            var s = "'" + pm.data[i].name + "'";
                            tbItemCatList += '<tr>'
                            tbItemCatList += '<td><input type="checkbox" name="checkbox" value="' + pm.data[i].id + '"></td>'
                            tbItemCatList += '<td>' + pm.data[i].id + '</td>'
                            tbItemCatList += '<td>' + pm.data[i].name + '</td>'
                            tbItemCatList += '<td>' + pm.data[i].typeId + '</td>'
                            tbItemCatList += '<td className="text-center">'
                            tbItemCatList += '<button type="button" onclick="showtwo(' + pm.data[i].id + ',' + s + ')" className="btn bg-olive btn-xs">查询下级</button>'
                            tbItemCatList += '<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" onclick="echoupdateTbItemCat(' + pm.data[i].id + ')" data-target="#upfateeditModal">修改'
                            tbItemCatList += '</button>'
                            tbItemCatList += ' <button type="button" onclick="deleteTbItemCat(' + pm.data[i].id + ')">删除</button>'
                            tbItemCatList += '</td>'
                            tbItemCatList += '</tr>'
                        })
                        $("#tbItemCatList").html(tbItemCatList)
                    },
                    error: function (pm) {
                        alert("系统异常")
                    }
                })
            }

            //展示分类数据二级
            function showtwo(id, name) {
                var s = "'" + name + "'";

                //导航栏加载
                var daohanglan = '<li><a href="javascript:showone()">顶级分类列表</a></li><li id="' + id + '"><a href="javascript:showtwo(' + id + ',' + s + ')">' + name + '</a></li>'
                $("#daohanglan").html(daohanglan)

                //展示分类数据二级
                $.ajax({
                    url: "/TbItemCat/TbItemCatshow",
                    data: {parentId: id},
                    type: "post",
                    dataType: "json",
                    async: false,
                    success: function (pm) {
                        var tbItemCatList = ''
                        $(pm.data).each(function (i, e) {
                            var s = "'" + pm.data[i].name + "'";
                            tbItemCatList += '<tr>'
                            tbItemCatList += '<td><input type="checkbox" name="checkbox" value="' + pm.data[i].id + '"></td>'
                            tbItemCatList += '<td>' + pm.data[i].id + '</td>'
                            tbItemCatList += '<td>' + pm.data[i].name + '</td>'
                            tbItemCatList += '<td>' + pm.data[i].typeId + '</td>'
                            tbItemCatList += '<td className="text-center">'
                            tbItemCatList += '<button type="button" onclick="showthree(' + pm.data[i].id + ',' + s + ')" className="btn bg-olive btn-xs">查询下级</button>'
                            tbItemCatList += '<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" onclick="echoupdateTbItemCat(' + pm.data[i].id + ')" data-target="#upfateeditModal">修改'
                            tbItemCatList += '</button>'
                            tbItemCatList += ' <button type="button" onclick="deleteTbItemCat(' + pm.data[i].id + ')">删除</button>'
                            tbItemCatList += '</td>'
                            tbItemCatList += '</tr>'
                        })
                        $("#tbItemCatList").html(tbItemCatList)
                    },
                    error: function (pm) {
                        alert("系统异常")
                    }
                })
            }

            //展示分类数据三级
            function showthree(id, name) {
                var find = $("#daohanglan").find("li").length;
                if (find != 3) {
                    //导航栏加载
                    var daohanglan = '<li id="' + id + '"><a href="###">' + name + '</a></li>'
                    $("#daohanglan").append(daohanglan)
                }

                //展示分类数据三级
                $.ajax({
                    url: "/TbItemCat/TbItemCatshow",
                    data: {parentId: id},
                    type: "post",
                    dataType: "json",
                    async: false,
                    success: function (pm) {
                        var tbItemCatList = ''
                        $(pm.data).each(function (i, e) {
                            tbItemCatList += '<tr>'
                            tbItemCatList += '<td><input type="checkbox" name="checkbox" value="' + pm.data[i].id + '"></td>'
                            tbItemCatList += '<td>' + pm.data[i].id + '</td>'
                            tbItemCatList += '<td>' + pm.data[i].name + '</td>'
                            tbItemCatList += '<td>' + pm.data[i].typeId + '</td>'
                            tbItemCatList += '<td className="text-center">'
                            tbItemCatList += '<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" onclick="echoupdateTbItemCat(' + pm.data[i].id + ')" data-target="#upfateeditModal">修改'
                            tbItemCatList += '</button>'
                            tbItemCatList += ' <button type="button" onclick="deleteTbItemCat(' + pm.data[i].id + ')">删除</button>'
                            tbItemCatList += '</td>'
                            tbItemCatList += '</tr>'
                        })
                        $("#tbItemCatList").html(tbItemCatList)
                    },
                    error: function (pm) {
                        alert("系统异常")
                    }
                })
            }

            //<!--复选框反转-->
            function reversal() {
                $("[name=checkbox]").prop("checked", $("#selall").prop("checked"))
            }
        </script>


    </div>
    <!-- 数据表格 /-->


</div>
<!-- /.box-body -->


<!-- 编辑窗口 添加-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">商品分类编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>上级商品分类</td>
                        <td id="zhishi">
                        </td>
                    </tr>
                    <tr>
                        <td>商品分类名称</td>
                        <td><input class="form-control" placeholder="商品分类名称" id="name"></td>
                    </tr>
                    <tr>
                        <td>类型模板</td>
                        <td id="leixingmoban">
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" onclick="addTbItemCat()" aria-hidden="true">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑窗口 修改-->
<div class="modal fade" id="upfateeditModal" tabindex="-1" role="dialog" aria-labelledby="updatemyModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="updatemyModalLabel">商品分类编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>上级商品分类</td>
                        <td id="zhishis">
                        </td>
                    </tr>
                    <tr>
                        <td>商品分类名称<input class="form-control" type="hidden" id="ii"></td>
                        <td><input class="form-control" placeholder="商品分类名称" id="names"></td>
                    </tr>
                    <tr>
                        <td>类型模板</td>
                        <td id="leixingmobans">
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" onclick="updateTbItemCats()" aria-hidden="true">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--增删改查操作-->
<script type="text/javascript">

    //添加分类数据框回显
    function echoTbItemCat() {
        var i = $("#daohanglan").find('li').length;
        if (i == 1) {
            $("#zhishi").text("目前是顶级")
        }
        if (i == 2) {
            var ss = $($($("#daohanglan").find('li')[1]).find('a')).prop("text")
            $("#zhishi").text(ss)
        }
        if (i == 3) {
            var ss = $($($("#daohanglan").find('li')[2]).find('a')).prop("text")
            $("#zhishi").text(ss)
        }
        //<!--关联模板,关联规格回显到input-->
        $.ajax({//关联模板
            url: "/TbTypeTemplate/TbTypeTemplateshow",
            data: {},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                var guiges = '<select style="width: 100%" id="cc">'
                $(pm.data).each(function (i, e) {
                    guiges += '<option value="' + e.id + '">' + e.name + '</option>'
                })
                guiges += '</select>'
                $("#leixingmoban").html(guiges);
                $("#cc").select2()
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //添加分类数据
    function addTbItemCat() {
        var i = $("#daohanglan").find('li').length;
        var id
        if (i == 1) {
            id = 0
        }
        if (i == 2) {
            id = $($("#daohanglan").find('li')[1]).prop("id")
            var ss = $($($("#daohanglan").find('li')[1]).find('a')).prop("text")
        }
        if (i == 3) {
            id = $($("#daohanglan").find('li')[2]).prop("id")
            var ss = $($($("#daohanglan").find('li')[2]).find('a')).prop("text")
        }
        var name = $("#name").val();
        if (name == null || name == ''){
            alert("商品分类不能为空")
            return;
        }
        var select = $("#cc").select2('data').id;
        $.ajax({
            url: "/TbItemCat/addTbItemCatshow",
            data: {parentId: id, name: name, typeId: select},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                alert(pm.message)
                if (i == 1) {
                    showone()
                    return
                }
                if (i == 2) {
                    showtwo(id, ss)
                    return;
                }
                if (i == 3) {
                    showthree(id, ss)
                }
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //修改分类数据框回显
    function echoupdateTbItemCat(id) {
        var i = $("#daohanglan").find('li').length;
        if (i == 1) {
            $("#zhishis").text("目前是顶级")
        }
        if (i == 2) {
            var ss = $($($("#daohanglan").find('li')[1]).find('a')).prop("text")
            $("#zhishis").text(ss)
        }
        if (i == 3) {
            var ss = $($($("#daohanglan").find('li')[2]).find('a')).prop("text")
            $("#zhishis").text(ss)
        }
        //<!--关联模板,关联规格回显到input-->
        $.ajax({//关联模板
            url: "/TbTypeTemplate/TbTypeTemplateshow",
            data: {},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                var guiges = '<select style="width: 100%" id="dd">'
                $(pm.data).each(function (i, e) {
                    guiges += '<option value="' + e.id + '">' + e.name + '</option>'
                })
                guiges += '</select>'
                $("#leixingmobans").html(guiges);
                $("#dd").select2()
            },
            error: function () {
                alert("系统异常")
            }
        })

        //<!--模板回显-->
        $.ajax({//模板
            url: "/TbItemCat/echoTbItemCat",
            data: {id: id},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                $("#names").val(pm.data.name)
                $("#dd").val(pm.data.typeId).trigger("change")
                $("#ii").val(pm.data.id);
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //修改分类数据
    function updateTbItemCats() {
        var ii = $("#ii").val();
        var i = $("#daohanglan").find('li').length;
        var id
        if (i == 1) {
            id = 0
        }
        if (i == 2) {
            id = $($("#daohanglan").find('li')[1]).prop("id")
            var ss = $($($("#daohanglan").find('li')[1]).find('a')).prop("text")
        }
        if (i == 3) {
            id = $($("#daohanglan").find('li')[2]).prop("id")
            var ss = $($($("#daohanglan").find('li')[2]).find('a')).prop("text")
        }
        var name = $("#names").val();
        if (name == null || name == ''){
            alert("商品分类不能为空")
            return;
        }
        var select = $("#dd").select2('data').id;
        $.ajax({
            url: "/TbItemCat/updateTbItemCatshow",
            data: {id: ii, parentId: id, name: name, typeId: select},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                alert(pm.message)
                if (i == 1) {
                    showone()
                    return
                }
                if (i == 2) {
                    showtwo(id, ss)
                    return;
                }
                if (i == 3) {
                    showthree(id, ss)
                }
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //删除单个分类数据
    function deleteTbItemCat(ii) {
        if (confirm("你确定要删除吗?")) {
            var i = $("#daohanglan").find('li').length;
            var id
            if (i == 1) {
                id = 0
            }
            if (i == 2) {
                id = $($("#daohanglan").find('li')[1]).prop("id")
                var ss = $($($("#daohanglan").find('li')[1]).find('a')).prop("text")
            }
            if (i == 3) {
                id = $($("#daohanglan").find('li')[2]).prop("id")
                var ss = $($($("#daohanglan").find('li')[2]).find('a')).prop("text")
            }
            $.ajax({
                url: "/TbItemCat/deleteTbItemCat",
                data: {id: ii},
                type: "post",
                dataType: "json",
                async: false,
                success: function (pm) {
                    if (pm.code == -41) {
                        alert(pm.message)
                        return
                    }
                    alert(pm.message)
                    if (i == 1) {
                        showone()
                        return
                    }
                    if (i == 2) {
                        showtwo(id, ss)
                        return;
                    }
                    if (i == 3) {
                        showthree(id, ss)
                    }
                },
                error: function () {
                    alert("系统异常")
                }
            })
        }
    }


    //多条数据删除
    function deleteallTbItemCat() {
        var ids = []
        $("[name=checkbox]").each(function (i, e) {
            if ($(e).prop("checked")) {
                ids.push($(e).val())
            }
        })
        if (ids == '') {
            alert("请先选择要删除的品牌")
            return
        }
        if (confirm("你确定要删除吗?")) {
            var i = $("#daohanglan").find('li').length;
            var id
            if (i == 1) {
                id = 0
            }
            if (i == 2) {
                id = $($("#daohanglan").find('li')[1]).prop("id")
                var ss = $($($("#daohanglan").find('li')[1]).find('a')).prop("text")
            }
            if (i == 3) {
                id = $($("#daohanglan").find('li')[2]).prop("id")
                var ss = $($($("#daohanglan").find('li')[2]).find('a')).prop("text")
            }
            $.ajax({
                url: "/TbItemCat/deleteallTbItemCat",
                data: {ids: ids},
                type: "post",
                dataType: "json",
                async: false,
                success: function (pm) {
                    alert(pm.message)
                    if (i == 1) {
                        showone()
                        return
                    }
                    if (i == 2) {
                        showtwo(id, ss)
                        return;
                    }
                    if (i == 3) {
                        showthree(id, ss)
                    }
                },
                error: function () {
                    alert("系统异常")
                }
            })
        }
    }
</script>
</body>
</html>